<template>
    <div class="teamInfo">
      <div class="teamInfohead">
        <div class="teamLogo"><img :src="getTeamImgUrl(teamInfo.logo)" v-if="teamInfo.logo"></div>
        <div class="teamInfoDetail">
          <table class="teamInfoDeatailUl">
            <tr><td>{{teamInfo.teamNameCN}}</td><td>{{teamInfo.teamName}}</td><td>成立时间：</td><td>{{teamInfo.teamDate}}</td></tr>
            <tr><td>主场：</td><td><span><img :src="getTeamImgUrl(teamInfo.national)" v-if="teamInfo.national"></span><span>{{teamInfo.city}}</span><span>{{teamInfo.home}}</span></td><td>容纳人数：</td><td>{{teamInfo.number}}</td><td>简称：</td><td>{{teamInfo.shortName}}</td></tr>
          </table>
        </div>

      </div>
      <div class="teamInfodesc">
        {{teamInfo.teamInfodesc}}
      </div>

      <div class="employeeListInfo">
          <div class="employeeListByPosition" v-for="(eployeegroup,index) in teamInfo.employees" :key="index">
            <div class="eployeegroupTitle">
              <div>{{index}}</div>
              <hr>
            </div>
            <div class="employeeInfoDiv" v-for="(employee,employeeIndex) in eployeegroup" :key="employeeIndex">
              <ul class="employeeInfo">
                <li><img :src="getPlayerImgUrl(employee.photo,teamInfo.short)">
                 <span v-if="employee.num">{{employee.num}}</span>
                  <span v-if="employee.num"></span>
                </li>
                <li>{{employee.name}}</li>
                <li v-if="employee.birthday">{{employee.birthday}}</li>
                <li v-if="employee.position">{{employee.position}}</li>
              </ul>
            </div>
          </div>
      </div>
    </div>
</template>

<script>
  import api from '../../../axios/api.js'
  import utils from '../../assets/scripts/utils.js'
  let teamId = utils.getUrlKey('teamId')//也可以在路由中设置 就不需要引入js解析
//alert(teamId)
  //let teamId = this.$route.query.teamId;//路由方式获取 需要在该模块路由中添加
  //例如需要配合 this.$router.push({path:`/user/${userId}`})
  //例如      path: '/teamInfo/:teamId/',
  /*备注:
1、参数名需要保持一致
2、如果路由中没有传参（http://192.168.1.12:8080/#/teamInfo），会报错，页面无法显示，正常页面为 http://192.168.1.12:8080/#/teamInfo/ASN

如果有的参数可传可不传，可以使用？传参
例如：http://192.168.1.12:8080/#/teamInfo/?teamId=ASN
  * */
    export default {
        name: "teamInfo",
      data(){
          return {
            teamInfo:[]
          }
      },
      created(){
          this.setDataFromAxios();
      },

      methods:{
        getTeamImgUrl:function(ico){
          return require("../../../static/images/team/"+ico);
        },
        getPlayerImgUrl:function(ico,teamName){
          return require("../../../static/images/team/"+teamName+"/"+ico);
        },
        setDataFromAxios: function() {
          api.setDataFromAxios('/teamInfo/'+teamId, null,'post')//自行封装的axios方法 post get参数需要与mock.js中 参数匹配
            .then(res => {
              console.log(res);
              this.teamInfo = res;
            });
        }
      }
    }
</script>
<style lang="stylus">
  .teamInfo
     width 1028px;
     margin 0 auto;
     position relative;
   .teamInfohead
     width 1028px;
     height 120px;
   .teamLogo
     position absolute;
     left 0
     top 0
  .teamLogo img
    width 100px;
    height 100px;
  .teamInfoDetail
    position absolute;
    top 0
    right 0
    .teamInfoDeatailUl
      margin 0
      padding 0
     td
       display table-cell
       height 30px;
       text-align left
       padding 0px;
       line-height 30px;
       >span
         height:30px;
         line-height 30px;
         display inline-block ;
         vertical-align: middle;
         margin-top 0px;
       >span:nth-child(1)
         width:40px;
       >span:nth-child(2)
         width:140px;
       >span:nth-child(3)
         width:180px;

     td:nth-child(1)
         width 100px;
     td:nth-child(2)
         width 380px;
     td:nth-child(3)
         width 100px;
     td:nth-child(4)
         width 100px;
  .eployeegroupTitle
    position relative
    height 36px;
    div
      width 120px;
      height 36px;
      line-height 36px;
      border-radius 4px 4px 0 0;
      background-color slategray
      color white
    hr
      position absolute;
      width 1160px;
      bottom 0
      margin 0
      padding 0
  .teamInfodesc
    width 1280px;
    text-align justify
    text-indent 2em
    font-size 20px;
    padding 30px 0px;
  .employeeInfoDiv
    width 180px;
    padding 30px 30px;
    float left;
    height auto;
  .employeeListInfo
    width 1280px;
    >.employeeListByPosition
      padding 0
      margin 0
      height auto;
      width 1280px;
      &:after
        clear both
        content ''
        display block
   .employeeInfo
       margin 0
       padding 0
       >li
        list-style-type none;
        position relative
        >img
         width 180px;
         height 280px;
        >span:nth-child(2)
         display inline-block
         width 40px
         height 40px
         line-height 40px;
         opacity 0.3
         color  slategray
         position absolute;
         top 2px
         left 2px
         border-radius 90px;
        >span:nth-child(3)
         display inline-block
         width 40px
         height 40px
         opacity 0.3
         position absolute;
         top 0px
         left 0px
         border-radius 90px;
         border solid 2px slategray


</style>
